import React, { Component } from "react"
import { Button } from 'antd'
import { PlayCircleOutlined } from '@ant-design/icons'
export default class MyButton extends Component{
  state = {
    btnLoading: false
  }
  clickLoadingBtn = () => {
    this.setState({ btnLoading: true })
    setTimeout(() => {
      this.setState({ btnLoading: false })
    }, 3000)
  }
  render() {
    return (
      <>
        <div className="box">
          <div className="box-header">base</div>
          <div className="box-body">
            <div className="box-content">
              <Button type="primary">按钮</Button>
              <Button>按钮</Button>
              <Button type="dashed">按钮</Button>
              <Button type="link">按钮</Button>
              <Button type="text">按钮</Button>
            </div>
          </div>
        </div>
        <div className="box">
          <div className="box-header">shape</div>
          <div className="box-body">
            <div className="box-content">
              <Button type="primary" shape="circle">按钮</Button>
              <Button shape="round">按钮</Button>
            </div>
          </div>
        </div>
        <div className="box">
          <div className="box-header">size&danger&ghost</div>
          <div className="box-body">
            <div className="box-content">
              <Button size="large">按钮</Button>
              <Button size="middle">按钮</Button>
              <Button size="small">按钮</Button>
              <Button danger>按钮</Button>
              <Button ghost>按钮</Button>
            </div>
          </div>
        </div>
        <div className="box">
          <div className="box-header">size&danger&ghost&icon</div>
          <div className="box-body">
            <div className="box-content">
              <Button size="large">按钮</Button>
              <Button size="middle">按钮</Button>
              <Button size="small">按钮</Button>
              <Button danger>按钮</Button>
              <Button ghost>按钮</Button>
              <Button icon={<PlayCircleOutlined />}>按钮</Button>
            </div>
          </div>
        </div>
        <div className="box">
          <div className="box-header">action</div>
          <div className="box-body">
            <div className="box-content">
              <Button type="primary" loading={this.state.btnLoading} onClick={this.clickLoadingBtn}>click me</Button>
            </div>
          </div>
        </div>
      </>
    )
  }
}